<template>
    <div class="bigbox animate__animated animate__slideInLeft">
        <div style="width: 100%">
            <el-collapse v-model="activeName" accordion>
                <el-collapse-item name="1">
                    <template #title>
                        操作提示<el-icon class="header-icon">
                            <info-filled />
                        </el-icon>
                    </template>
                    <div style="color: gray;">
                        *查看并管理平台所有自营和入驻商家
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-form :inline="true" ref="searchFrom" :model="formInline" class="demo-form-inline">
            <el-form-item label="门店名称" prop="user">
                <el-input v-model="formInline.user" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="定价方式" prop="region">
                <el-select v-model="formInline.region" placeholder="请选择门店模式">
                    <el-option label="自营" value="自营" />
                    <el-option label="加盟" value="加盟" />
                </el-select>
            </el-form-item>

            <el-form-item label="定价方式" prop="isOpen">
                <el-select v-model="formInline.isOpen" placeholder="请选择门店状态">
                    <el-option label="营业中" value="营业中" />
                    <el-option label="停业中" value="停业中" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <!-- <el-button type="primary" v-model="search" @click="onSubmit">搜索</el-button> -->
                <el-button @click="resetFrom(searchFrom)">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-divider /> -->
        <el-form-item class="searchButton">
            <el-button type="primary" @click="addstore">新增门店</el-button>
        </el-form-item>

        <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
            <el-table-column fixed prop="id" label="门店编号" align="center" width="100" />
            <el-table-column prop="name" label="门店名称" align="center" width="150" />
            <el-table-column prop="model" label="门店模式" align="center" width="100" />
            <el-table-column prop="address" label="门店地址" align="center" />
            <el-table-column prop="state" label="门店状态" align="center" width="100" />
            <el-table-column prop="time" label="创建时间" align="center" width="100" />
            <el-table-column prop="operate" label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)" plain>编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)" plain>删除</el-button>
                    <!-- <el-button type="primary" size="small" @click="openShop(scope.row)" plain
                        v-if="store.state.storemsg.filterTableData.model == '停业中' ">营业</el-button>
                    <el-button type="danger" size="small" @click="closeShop(scope.row)" plain
                        6Zv-if="store.state.storemsg.ocState == false">停业</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>

    <UpdateTable @get-list="getTableList"></UpdateTable>
    <AddShop @get-list="getTableList"></AddShop>
    <OpenShop @get-list="getTableList"></OpenShop>
    <CloseShop @get-list="getTableList"></CloseShop>
</template>
 
<script setup lang="ts">
import http from '../util/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { computed, onMounted, reactive, ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import UpdateTable from "../components/UpdateDialog.vue";
import AddShop from "../components/AddShop.vue";
import OpenShop from "../components/openShop.vue";
import CloseShop from "../components/closeShop.vue";
import { useStore } from 'vuex';
import 'animate.css'

const activeName = ref(['1'])
const store = useStore()
//表格数据
const userList = ref<any>([])
const searchFrom = ref<FormInstance>()

const handleChange = (val: string[]) => {
    console.log(val)
}


//挂载时渲染数据
onMounted(() => {
    getTableList()
})

//获取店铺信息
const getTableList = () => {
    http('/shop', 'get').then((res: any) => {
        // console.log(res);
        if (res.status === 200) {
            ElMessage({
                message: '信息获取成功！',
                type: 'success',
            })
            userList.value = res.data
            // store.commit('addTableData', res.data)
            // console.log(state.userList);

        } else {
            ElMessage({
                message: '信息获取失败！',
                type: 'error',
            })
        }
    })
}

const formInline = reactive<any>({
    user: '',
    region: '',
    isOpen: ''
})

// 查询会员信息
const filterTableData = computed(() => {
    // console.log("点击成功");
    let newKeyWord: any = []
    for (let i = 0; i < userList.value.length; i++) {
        if ((userList.value[i].name.indexOf(formInline.user) > -1) && (userList.value[i].model.indexOf(formInline.region) > -1) && (userList.value[i].state.indexOf(formInline.isOpen) > -1)) {
            newKeyWord.push(userList.value[i])
        }
    }
    return newKeyWord
})

//分页器功能
//当前页数
const currentPage = ref(1)
//每页显示个数
const pageSize = ref(10)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)
//搜索输入框
const search = ref('')
//显示个数变化
const handleSizeChange = (val: number) => {
    pageSize.value = val
}
//页码改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

//增加店铺功能
const addstore = () => {
    // store.commit('showAddEdit')
    store.commit('changeAddDialog')
}

//编辑信息功能
const handleEdit = (row: any) => {
    // console.log(row)
    store.commit('showEdit', row)
    store.commit('changeDialog')
}

// 重置
const resetFrom = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    // console.log('重置');
}

//删除信息
const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确认删除该信息吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http(`/shop/${row.id}`, 'delete').then((res: any) => {
            if (res.status === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                getTableList()
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败！',
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消！',
        })
    })
}

// //门店营业
// const openShop = (row: any) => {
//     console.log('营业了');
//     store.commit('changeOpen')
// }

// //门店停业
// const closeShop = (row: any) => {
//     console.log('停业了');
//     store.commit('changeClose')
// }

</script>

<style scoped>
.bigbox {
    background-color: #fff;
    padding: 20px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>